<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>MyIndex</title>
    <link rel="stylesheet" href="css.css">
    <script src="jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="assets/waifu.css" />
    
    <script>
    var digitSegments = [
    [1, 2, 3, 4, 5, 6],
    [2, 3],
    [1, 2, 7, 5, 4],
    [1, 2, 7, 3, 4],
    [6, 7, 2, 3],
    [1, 6, 7, 3, 4],
    [1, 6, 5, 4, 3, 7],
    [1, 2, 3],
    [1, 2, 3, 4, 5, 6, 7],
    [1, 2, 7, 3, 6]
    ]

    document.addEventListener('DOMContentLoaded', function () {
    var _hours = document.querySelectorAll('.hours');
    var _minutes = document.querySelectorAll('.minutes');
    var _seconds = document.querySelectorAll('.seconds');

    setInterval(function () {
    var date = new Date();
    var hours = date.getHours(),
    minutes = date.getMinutes(),
    seconds = date.getSeconds();

    setNumber(_hours[0], Math.floor(hours / 10), 1);
    setNumber(_hours[1], hours % 10, 1);

    setNumber(_minutes[0], Math.floor(minutes / 10), 1);
    setNumber(_minutes[1], minutes % 10, 1);

    setNumber(_seconds[0], Math.floor(seconds / 10), 1);
    setNumber(_seconds[1], seconds % 10, 1);
    }, 1000);
    });

    var setNumber = function (digit, number, on) {
    var segments = digit.querySelectorAll('.segment');
    var current = parseInt(digit.getAttribute('data-value'));

    // only switch if number has changed or wasn't set
    if (!isNaN(current) && current != number) {
    // unset previous number
    digitSegments[current].forEach(function (digitSegment, index) {
    setTimeout(function () {
    segments[digitSegment - 1].classList.remove('on');
    }, index * 45)
    });
    }

    if (isNaN(current) || current != number) {
    // set new number after
    setTimeout(function () {
    digitSegments[number].forEach(function (digitSegment, index) {
    setTimeout(function () {
    segments[digitSegment - 1].classList.add('on');
    }, index * 45)
    });
    }, 250);
    digit.setAttribute('data-value', number);
    }
    }


 
    $(function () {
      

    // 一言  ！！！语句使用了接口
    // hitokoto：一言正文。编码方式 unicode。使用 utf-8
    var xhr = new XMLHttpRequest();
    xhr.open('get', 'https://v1.hitokoto.cn');
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            var data = JSON.parse(xhr.responseText);
            var hitokoto = document.getElementById("hitoKoto");
            var from = document.getElementById("hitoKoto-From");
            hitokoto.innerText = data.hitokoto;
            from.innerText = data.from;
            $("#hito").fadeIn("slow");
        }
    }
    xhr.send();

    var hitokoto = setInterval(function () {
    $("#hito").fadeOut("fast", function () {
    var xhr = new XMLHttpRequest();
    xhr.open('get', 'https://v1.hitokoto.cn');
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            var data = JSON.parse(xhr.responseText);
            var hitokoto = document.getElementById("hitoKoto");
            var from = document.getElementById("hitoKoto-From");
            hitokoto.innerText = data.hitokoto;
            from.innerText = data.from;
            $("#hito").fadeIn("slow");
        }
    }
    xhr.send();
    });
    }, 25000)



    ! function () {  
        function get_attribute(node, attr, default_value) {
            return node.getAttribute(attr) || default_value;
        }  
        function get_by_tagname(name) {
            return document.getElementsByTagName(name);
        }
        function get_config_option() {
            var scripts = get_by_tagname("script"),
                script_len = scripts.length,
                script = scripts[script_len - 1]; 
            return {
                l: script_len, 
                z: get_attribute(script, "zIndex", 1), //z-index    
                o: get_attribute(script, "opacity", 0.5), //opacity    
                c: get_attribute(script, "color", "255,255,255"), //color    
                n: get_attribute(script, "count", 100) //count    
            };
        }
        function set_canvas_size() {
            canvas_width = the_canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
            canvas_height = the_canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        }

        function draw_canvas() {
            context.clearRect(0, 0, canvas_width, canvas_height);
            var all_array = [current_point].concat(random_lines);
            var e, i, d, x_dist, y_dist, dist; 
            random_lines.forEach(function (r) {
                r.x += r.xa,
                r.y += r.ya, 
                r.xa *= r.x > canvas_width || r.x < 0 ? -1 : 1,
                r.ya *= r.y > canvas_height || r.y < 0 ? -1 : 1,  
                context.fillRect(r.x - 0.5, r.y - 0.5, 1, 1);   
                for (i = 0; i < all_array.length; i++) {
                    e = all_array[i];
                    if (r !== e && null !== e.x && null !== e.y) {
                        x_dist = r.x - e.x,    
                        y_dist = r.y - e.y, 
                        dist = x_dist * x_dist + y_dist * y_dist; //总距离, m    
                        dist < e.max && (e === current_point && dist >= e.max / 2 && (r.x -= 0.03 * x_dist, r.y -= 0.03 * y_dist), //靠近的时候加速    
                            d = (e.max - dist) / e.max,
                            context.beginPath(),
                            context.lineWidth = d / 2,
                            context.strokeStyle = "rgba(" + config.c + "," + (d + 0.2) + ")",
                            context.moveTo(r.x, r.y),
                            context.lineTo(e.x, e.y),
                            context.stroke());
                    }
                }
                all_array.splice(all_array.indexOf(r), 1);

            }), frame_func(draw_canvas);
        }
        var the_canvas = document.createElement("canvas"), //画布    
            config = get_config_option(),    
            canvas_id = "c_n" + config.l, 
            context = the_canvas.getContext("2d"), canvas_width, canvas_height,
            frame_func = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (func) {
                window.setTimeout(func, 1000 / 45);
            }, random = Math.random,
            current_point = {
                x: null, //当前鼠标x    
                y: null, //当前鼠标y    
                max: 20000
            };
        the_canvas.id = canvas_id;
        the_canvas.style.cssText = "position:fixed;top:0;left:0;z-index:" + config.z + ";opacity:" + config.o;
        get_by_tagname("body")[0].appendChild(the_canvas);

        set_canvas_size(), window.onresize = set_canvas_size;
        window.onmousemove = function (e) {
            e = e || window.event, current_point.x = e.clientX, current_point.y = e.clientY;
        }, window.onmouseout = function () {
            current_point.x = null, current_point.y = null;
        }; 
        for (var random_lines = [], i = 0; config.n > i; i++) {
            var x = random() * canvas_width, //随机位置    
                y = random() * canvas_height,
                xa = 2 * random() - 1,   
                ya = 2 * random() - 1;
            random_lines.push({
                x: x,
                y: y,
                xa: xa,
                ya: ya,
                max: 6000  
            });
        }
        setTimeout(function () {
            draw_canvas();
        }, 100);
    }();

    })

    </script>
    <style>
        @import url('https://fonts.googleapis.com/css?family=Roboto:300');

        html,
        body {
            margin: 0;
            padding: 0;
            background: #000;
            width: 100%;
            height: 100%;
            position: absolute;
            min-width: 900px;
        }

        .calendar {
            color: #5d5fd1;     /* 不知道是什么的颜色 */ 
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 0%;
            padding: 0%;
        }

        .time {
            opacity: 0;
            font-family: 'Roboto', sans-serif;
            text-shadow: 0 0 50px rgba(103, 145, 235, 0.7);     /* 不知道是什么的颜色 */
            left: 50%;
            top: 50%;
            height: 50px;
            width: 100%;
            margin-top: 50px;
            text-align: center;
        }

        .date {
            opacity: 1;
            transition: opacity 0s;
            -webkit-transition: opacity 0s;
            -ms-transition: opacity 0s;
            -moz-transition: opacity 0s;
            -o-transition: opacity 0s;
        }

        .clock {                        /* 控制时间的位置 */
            height: 200px;
            position: absolute;
            top: 50%;
            left: 50%;
            width: 900px;
            margin-left: -450px;
            margin-top: -100px;
            text-align: right;
        }

        .digit {
            width: 120px;
            height: 200px;
            margin: 0 5px;
            position: relative;
            display: inline-block;
        }

            .digit .segment {                   /* 小时调节 */
                background: #fc9015;
                border-radius: 5px;             /* 给div元素添加圆角的边框  */
                position: absolute;
                opacity: 0;
                transition: opacity 0.2s;
                -webkit-transition: opacity 0.2s;
                -ms-transition: opacity 0.2s;
                -moz-transition: opacity 0.2s;
                -o-transition: opacity 0.2s;
            }

        .minutes .segment {                     /* 分钟调节 */
            background: #3187f8;
            border-radius: 10px;        
            position: absolute;
            opacity: 0;
            transition: opacity 0.2s;
            -webkit-transition: opacity 0.2s;
            -ms-transition: opacity 0.2s;
            -moz-transition: opacity 0.2s;
            -o-transition: opacity 0.2s;
        }

        .seconds .segment {                     /* 秒钟调节？？？ 可能被关了 */         
            background: #f15151;
            border-radius: 5px;
            position: absolute;
            opacity: 0;
            transition: opacity 0.2s;
            -webkit-transition: opacity 0.2s;
            -ms-transition: opacity 0.2s;
            -moz-transition: opacity 0.2s;
            -o-transition: opacity 0.2s;
        }

        .digit .segment.on {
            opacity: 1;
            box-shadow: 0 0 100px rgba(229, 229, 229, 0.7);
            transition: opacity 0s;
            -webkit-transition: opacity 0s;
            -ms-transition: opacity 0s;
            -moz-transition: opacity 0s;
            -o-transition: opacity 0s;
        }

        .separator {
            opacity: 0;
            box-shadow: 0 0 100px rgba(229, 229, 229, 0.7);
            transition: opacity 0s;
            -webkit-transition: opacity 0s;
            -ms-transition: opacity 0s;
            -moz-transition: opacity 0s;
            -o-transition: opacity 0s;
        }

        .minutes .segment.on {
            opacity: 1;
            box-shadow: 0 0 100px rgba(255, 0, 0, 0.7);
            transition: opacity 0s;
            -webkit-transition: opacity 0s;
            -ms-transition: opacity 0s;
            -moz-transition: opacity 0s;
            -o-transition: opacity 0s;
        }

        .seconds .segment.on {
            opacity: 1;
            box-shadow: 0 0 100px rgba(229, 229, 229, 0.7);
            transition: opacity 0s;
            -webkit-transition: opacity 0s;
            -ms-transition: opacity 0s;
            -moz-transition: opacity 0s;
            -o-transition: opacity 0s;
        }

        .separator {
            opacity: 0;
            width: 20px;
            height: 20px;
            background: #FFf;
            border-radius: 50%;
            display: inline-block;
            position: relative;
            top: -90px;
        }

        .digit .segment:nth-child(1) {
            top: 10px;
            left: 20px;
            right: 20px;
            height: 10px;
        }

        .digit .segment:nth-child(2) {
            top: 20px;
            right: 10px;
            width: 10px;
            height: 75px;
            height: calc(50% - 25px);
        }

        .digit .segment:nth-child(3) {
            bottom: 20px;
            right: 10px;
            width: 10px;
            height: 75px;
            height: calc(50% - 25px);
        }

        .digit .segment:nth-child(4) {
            bottom: 10px;
            right: 20px;
            height: 10px;
            left: 20px;
        }

        .digit .segment:nth-child(5) {
            bottom: 20px;
            left: 10px;
            width: 10px;
            height: 75px;
            height: calc(50% - 25px);
        }

        .digit .segment:nth-child(6) {
            top: 20px;
            left: 10px;
            width: 10px;
            height: 75px;
            height: calc(50% - 25px);
        }

        .digit .segment:nth-child(7) {
            bottom: 95px;
            bottom: calc(50% - 5px);
            right: 20px;
            left: 20px;
            height: 10px;
        }

        body {
            background-color: #1a1a1a;
            background-image: url(background.jpg);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-color:whitesmoke;
            /*//background-image: -webkit-radial-gradient(top, circle cover, #3c3b52 0%, #252233 0%);
        //background-image: -moz-radial-gradient(top, circle cover, #3c3b52 0%, #252233 0%);
        //background-image: -o-radial-gradient(top, circle cover, #3c3b52 0%, #252233 0%);
        //background-image: radial-gradient(circle cover at top, #3c3b52 0%, #252233 0%);*/
        }
    </style>
</head>
<body onload="load()">
    <style>
        #hito {
            display: none;
            margin: 0px auto;
            text-align: right;
            width: 100%;
            position: absolute;
            bottom: 50px;
        }

        #hitoKoto-div {
            margin-right: 7%;
        }

        #hitoKoto-div, #hitoKoto, .hitoKoto-span {
            text-align: right;
            color: #fff;
            font-family: 'Roboto', sans-serif;
            font-size: 25px;
        }

        #hitoKoto-div-ma {
            width: 100%;
        }

        #hitoKoto-div-ma, #hitoKoto-From, .hitoKoto-span-ma {
            text-align: right;
            color: #fff;
            font-family: 'Roboto', sans-serif;
            font-size: 18px;
        }

       
    </style>
    <!--<div id="hito">
        <div id="hitoKoto-div"><span class="hitoKoto-span">『</span><span id="hitoKoto">一言加载中Loading......</span><span class="hitoKoto-span">』</span><span class="hitoKoto-span-ma">-「</span><span id="hitoKoto-From">一言加载中Loading......</span><span class="hitoKoto-span-ma">」</span></div>
    </div>-->

    <div id="hito">
        <div id="hitoKoto-div"><span class="hitoKoto-span">『</span><span id="hitoKoto">一言加载中Loading......</span><span class="hitoKoto-span">』</span></div>
        <div id="hitoKoto-div-ma"><span class="hitoKoto-span-ma">-「</span><span id="hitoKoto-From">一言加载中Loading......</span><span class="hitoKoto-span-ma">」</span></div>
    </div>

    <div class="calendar">
        <div class="time">
            <!span id="clock"><!/span><br>
            <span id="date">Wednesday, August 1, 2017</span>
        </div>

        <div class="clock">
            <div class="digit hours">
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
            </div>

            <div class="digit hours">
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
            </div>

            <div class="separator"></div>

            <div class="digit minutes">
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
            </div>

            <div class="digit minutes">
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
            </div>

            <div class="separator"></div>

            <!div class="digit seconds">
            <!div class="segment">
        </div>
        <!div class="segment">
    </div>
    <!-- <!div class="segment"></div>
                 <!div class="segment"></div>
                 <!div class="segment"></div>
                 <!div class="segment"></div>
                 <!div class="segment"></div>
             </div>

             <!div class="digit seconds">
                 <!div class="segment"></div>
                 <!div class="segment"></div>
                 <!div class="segment"></div>
                 <!div class="segment"></div>
                 <!div class="segment"></div>
                 <!div class="segment"></div>
                 <!div class="segment"></div>
             </div>
         </div>
     </div>

     <div id="background"></div>-->




    <script src="js.js"></script>
   </body>

</html>